<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" bgColor="#f8f8f8" :auto="false">
		<!-- <view class="box"> </view> -->
		<template #top>
			<uv-navbar placeholder title="我的订单" bgColor="#FFF" @leftClick="leftClick"></uv-navbar>
			<view class="tabs p-r-20">
				<uv-tabs
					:list="tabsList"
					:scrollable="false"
					:current="current"
					@click="getTabs"
					lineColor="#333"
					:activeStyle="formData.activeStyle"
					:inactiveStyle="formData.inactiveStyle"
					:itemStyle="formData.itemStyle"
				></uv-tabs>
			</view>
		</template>
		<view class="m-t-24">
			<view class="flex" v-for="(item, index) in dataList" :key="index" @click="getRoute(item)">
				<view class="contentList m-x-32 m-b-20 p-28">
					<view class="flex justify-bet aling-ali">
						<view class="font-24 text-greey">订单编号:{{ item.order_sn }}</view>
						<view class="font-26">
							<!-- {{ ['取消订单', '待支付', '待发货', '待收货', '已收货', '退款/售后', '退款通过', '退款未通过', '已评价'][item.status - 1] }} -->
							{{ item.status_text }}
						</view>
					</view>
					<view class="mallProdForm" :class="['已收货', '已取消订单', '已完成', '已退款'].includes(item.status_text) ? 'mallProdForm2' : 'mallProdForm3'">
						<view class="mallProd flex m-t-26 p-b-26" v-for="(item2, index2) in item.products" :key="index2">
							<view>
								<uv-image width="192rpx" height="192rpx" :src="item2.image" radius="12rpx"></uv-image>
							</view>
							<view class="flex-1 flex-col m-l-20">
								<view class="font-30 font-w-b">
									{{ item2.product_name }}
								</view>
								<view class="flex m-t-25 flex-wrap" v-if="item2.add_type == 1">
									<view class="content font-28 m-r-20 p-x-14 p-y-6" v-for="(item3, index3) in item2.suk?.split(',')" :key="index3">
										{{ item3 }}
									</view>
								</view>
								<view class="m-b-30 m-t-10" style="gap: 20rpx" v-else>
									<view class="font-26 font-weight-middle">实际周长:{{ item2.reality_size }}cm</view>
									<view class="font-26 m-t-10 font-weight-middle">
										{{ item2.suk.line.product_name }}({{ item2.suk.line.suk }}){{ item2.total_number || '0' }}颗珠子
										<!-- {{item2.suk.materials.map(item2 => item2.product_name + 'x'
                      +
                      item2.number).join('、')}} -->
									</view>
								</view>
								<view class="flex m-t-28 justify-bet align-ali">
									<view class="font-28">x{{ item2.number }}</view>
									<view class="font-36 font-weight-bold text-840202">￥{{ item2.total_price / 100 }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex justify-jfend" v-if="item.status_text !== '已收货'">
						<view class="orderBtn" @click.stop="getRefund(item)" v-if="['待发货', '待收货', '已拒绝'].includes(item.status_text)">退款/售后</view>
						<view class="orderBtn" @click.stop="getWithdraw(item)" v-if="['退款/售后', '申请退款'].includes(item.status_text)">取消申请</view>
						<view class="orderBtn orderBtn2" @click.stop="getConfirm(item)" v-if="['待收货'].includes(item.status_text)">确认收货</view>
						<view class="orderBtn orderBtn2" @click.stop="getReturnOfGoods(item)" v-if="['退款通过', '已通过'].includes(item.status_text) && !item.tracking_number">
							填写退货单
						</view>
						<view class="orderBtn orderBtn2 m-t-20" @click.stop="getReturnOfGoods(item)" v-if="item.tracking_number">已退货</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
import { myOrderList, confirmOrder, withdraw } from '@/api/api';
import { ref, onMounted, reactive, getCurrentInstance } from 'vue';
import { useStore } from 'vuex';
import { onReachBottom, onShow, onLoad, onReady } from '@dcloudio/uni-app';
import { os, sys } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
const paging = ref(null);
const dataList = ref([]);
const { proxy } = getCurrentInstance();
onLoad((ope) => {
	if (ope.id) {
		console.log(ope.id, 'onLoad');
		current.value = ope.id;
	}
});
onShow(() => {
	setTimeout(() => {
		paging.value.reload();
	}, 10);
});
const leftClick = () => {
	// route({ url: '/pages/my/my', type: 'launch' })
	proxy.$tool.jump_nav('/pages/my/my');
};
const formData = reactive({
	activeStyle: {
		'font-family': 'Source Han Sans CN',
		'font-weight': '700',
		'font-size': '28rpx'
	},
	inactiveStyle: {
		'font-family': 'Source Han Sans CN',
		'font-weight': '500',
		'font-size': '28rpx',
		color: '#B5B5B5'
	},
	itemStyle: {
		height: '80rpx',
		padding: '0 0'
	}
});
const current = ref(0);
const tabsList = ref([
	{
		name: '审核中'
	},
	{
		name: '处理中'
	},
	{
		name: '已退款'
	}
]);
//标签切换
const getTabs = (e) => {
	console.log(e, '----tabs切换------');
	current.value = e.index;
	paging.value.reload();
};
//退款/售后
const getRefund = (e) => {
	route(`/pagesA/pages/originality/refund`, {
		order_sn: e.order_sn
	});
};
//点击商品详情
const getRoute = (e) => {
	console.log(e, '点击商品详情222');
	// return
	if (e.status_text == '已退款') {
		// route(`/pagesA/pages/originality/refundDetails`, { orderSn: e.order_sn });
		proxy.$tool.jump_nav(`/pagesA/pages/originality/refundDetails?orderSn=${e.order_sn}`);
	} else {
		// route(`/pagesA/pages/originality/orderDetails`, { orderSn: e.order_sn });
		proxy.$tool.jump_nav(`/pagesA/pages/originality/orderDetails?orderSn=${e.order_sn}`);
	}
	// route(`/pagesA/pages/originality/refundDetails`, {
	//   id: 1
	// })
};

//物流填写
const getReturnOfGoods = (e) => {
	route(`/pagesA/pages/originality/returnOfGoods`, {
		orderSn: e.order_sn
	});
};

const queryList = (page, pagesize) => {
	myOrderList({ page, pagesize, order_status: 4, audit_status: current.value + 1 }).then((res) => {
		paging.value.complete(res.data.list);
	});
};

//取消申请
const getWithdraw = (e) => {
	console.log(e, '取消申请');
	uni.showModal({
		title: '提示',
		content: '是否取消申请',
		success: (res) => {
			if (res.confirm) {
				console.log('用户点击确定');
				withdraw({ order_sn: e.order_sn }).then((res) => {
					paging.value.reload();
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
};
//确认收货
const getConfirm = (e) => {
	console.log(e, '确认收货');
	uni.showModal({
		title: '提示',
		content: '是否确认收货',
		success: (res) => {
			if (res.confirm) {
				console.log('用户点击确定');
				confirmOrder({ order_sn: e.order_sn }).then((res) => {
					paging.value.reload();
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
};
</script>

<style lang="scss" scoped>
.box {
	min-height: 100vh;
	background: #f8f8f8;
}

.contentList {
	width: 686rpx;
	// height: 419rpx;
	background: #fff;
	border-radius: 12rpx;

	.mallProdForm {
		border-bottom: 2rpx solid #d9d9d9;

		.mallProd:nth-child(2n) {
			margin-top: 0 !important;
		}

		.mallProd:last-child {
			padding-bottom: 0 !important;
		}

		.mallProd {
			.content {
				background: #f3f3f3;
				border-radius: 12rpx;
			}
		}
	}

	.mallProdForm2 {
		border-bottom: none !important;
	}

	.mallProdForm3 {
		padding-bottom: 26rpx !important;
		margin-bottom: 22rpx !important;
	}

	.orderBtn {
		padding: 13rpx 30rpx;
		box-sizing: border-box;
		border: 2rpx solid #c6c6c6;
		color: #1e1e1e;
		font-size: 28rpx;
		margin-left: 30rpx;
		border-radius: 12rpx;
	}

	.orderBtn2 {
		color: #fff;
		background: #830102;
		border: none;
	}
}
</style>
